<template>
    <div class="header">
        <div class="header-left">
            <div class="iconfont back-icon">&#xe624;</div>
        </div>
        <div class="header-center">
           <span class="iconfont search-icon">&#xe632;</span>
           输入城市/景点/游玩主题
        </div>
        <router-link to="/city">
        <div class="header-right">
         广州<span class="iconfont">&#xe62d;</span> 
         
        </div>
        </router-link>
        <div>
            
        </div>

    </div>
</template>

<script>
export default {
   name:'HomeHeader', 
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
{
display flex;
line-height :$headerHeight;
background-color :$bgColor;
}
.header-left{
    float : left;
    width :.64rem;

}
.back-icon{
    text-align center;
    margin-top :6px;

    line-height :$headerHeight;
}
.header-center{
    background-color  white;
    height    .64rem;
    margin 12px 0px;
    padding 0px 6px;
    border-radius: .1rem
    line-height :.64rem;
    width  300px;
    
}
.header-right
{
    margin 6px;
    color #fff;
}





</style>